<template>
    <div id="slider" class="mui-slider ">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a v-for="(item,index) in message"  :class="['mui-control-item',index==0? 'mui-active':'']" href="#item1mobile" data-wid="tab-top-subpage-1.html">
                   {{item.name}}
                </a>

            </div>
            <ul class="ul-list">
                <router-link v-for="item in list" to="/home/phone" tag="li">
                    <img v-lazy="item.url">
                    <div class="title">
                        <h3>{{item.name}}</h3>
                        <p>{{item.title}}</p>
                    </div>
                </router-link>
            </ul>
        </div>

    </div>
</template>

<script>
    import mui from '../../lib/mui/js/mui.js';
    // mui('.mui-scroll-wrapper').scroll({
    //     deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    // });
    export default {
        data(){
            return {
                message:[
                    {name:"全部"},
                    {name:"精品"},
                    {name:"人物"},
                    {name:"景象"},
                    {name:"社会"},
                    {name:"本地"}
                ],
                list:[
                    {url:"https://hbimg.huabanimg.com/a932b095cbe4f1d7dcc2ccf0eb33623ef1af89a541b54-vCojFk_fw658",title:"千万用户精选，优质在线灵感库\n" +
                            "已有数千万出众网友，用花瓣发现灵感、保存图片",name:"好好好好好好好好好好好好好好好好好好好"},
                    {url:"https://hbimg.huabanimg.com/cab58e250b67882045cc0b5d6ae35bdb4687b412e1ed-bNJM8E_fw658",title:"千万用户精选，优质在线灵感库\n" +
                            "已有数千万出众网友，用花瓣发现灵感、保存图片",name:"好好好好好好好好好好好好好好好好好好好"},
                    {url:"https://hbimg.huabanimg.com/92df5a7f70a110d6a7b7eef191771d45c42bebd23b8ab-uDjA0m_fw658",title:"千万用户精选，优质在线灵感库\n" +
                            "已有数千万出众网友，用花瓣发现灵感、保存图片",name:"好好好好好好好好好好好好好好好好好好好"},
                    {url:"https://hbimg.huabanimg.com/3353b8dbc5c2910b2a8e12b1f13c9ec392270f734bfd8-YD24uR_fw658",title:"千万用户精选，优质在线灵感库\n" +
                            "已有数千万出众网友，用花瓣发现灵感、保存图片",name:"好好好好好好好好好好好好好好好好好好好"},
                    {url: "https://hbimg.huabanimg.com/3220cf7cdbbd7fac410d3d016ab8d0a5dd3357334dd8e-NpqgKI_fw658",title:"千万用户精选，优质在线灵感库\n" +
                            "已有数千万出众网友，用花瓣发现灵感、保存图片",name:"好好好好好好好好好好好好好好好好好好好"},
                    {url: "https://hbimg.huabanimg.com/76d8e9bb1775281b2c7fdf24dcc31b88e4e053aa144a4-BHtILv_fw658",title:"千万用户精选，优质在线灵感库\n" +
                            "已有数千万出众网友，用花瓣发现灵感、保存图片",name:"好好好好好好好好好好好好好好好好好好好"},
                    {url: "https://hbimg.huabanimg.com/3bb9573294c2651c90f5510ac2c8c305720999b88cc9-uWHO8Y_fw658",title:"千万用户精选，优质在线灵感库\n" +
                            "已有数千万出众网友，用花瓣发现灵感、保存图片",name:"好好好好好好好好好好好好好好好好好好好"},
                    {url: "https://hbimg.huabanimg.com/f3a5ad21788f928441022d4718a0f159d16ca19959eca-eqkbQI_fw658",title:"千万用户精选，优质在线灵感库\n" +
                            "已有数千万出众网万出众网万出众网万出众网万出众网千万出众网千万出众网千万出众网千万出众网千万出众网千万出众网友，用花瓣发现灵感、保存图片",name:"好好好好好好好好好好好好好好好好好好好"}
                ]
            }
        },
        mounted() {
            // 当 组件中的DOM结构被渲染好并放到页面中后，会执行这个 钩子函数
            // 如果要操作元素了，最好在 mounted 里面，因为，这里时候的 DOM 元素 是最新的
            // 2. 初始化滑动控件
            mui(".mui-scroll-wrapper").scroll({
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
        }
    }
</script>

<style scoped lang="scss">
    .mui-slider {
        background-color: white;
    }
    .ul-list {
        list-style: none;
        margin: 0;
        padding: 40px 0 10px 0;
        li {
            background-color: white;
            box-shadow: 0 0 9px #999999;
            width: 89%;
            margin: 5px auto;
            position: relative;
            img {
                width: 100%;
                height: 400px;
                vertical-align: middle;
            }
            .title {
                position: absolute;
                background-color: rgba(0, 0 ,0, 0.5);
                text-align: left;
                max-height: 84px;
                bottom: 3px;
                h3,p {
                    color: white;
                }
                h3 {
                    font-size: 13px;
                }
                p {
                    font-size: 12px;
                }
            }
            img[lazy=loading] {
                width: 40px;
                height: 300px;
                margin: auto;
                color: white;
            }
        }
    }
</style>